<template>
  <Modal title="设置角色"
         v-model="modelView"
         :mask-closable="false"
         :fullscreen="false"
         :width="620"
         :closable="false"
         @on-visible-change="changeVisible">
    <Transfer
      :data="allData"
      :target-keys="targetKeys"
      :list-style="listStyle"
      :render-format="renderFun"
      :titles="titles"
      @on-change="handleChange"></Transfer>
    <div slot="footer">
      <Button type="text" @click="cancel">取消</Button>
      <Button type="primary" :loading="buttonLoading" @click="ok">确定</Button>
    </div>
  </Modal>
</template>

<script>
  import {setRole, getAllRoles, getUserRoles} from '@/api/sys/role'

  export default {
    name: "setRole",
    props: {
      visible: {
        type: Boolean,
        default: false
      },
      initFormData: {
        id: null
      }
    },
    data() {
      return {
        allData: [],
        targetKeys: [],
        titles:['所有角色','已有角色'],
        modelView: false,
        buttonLoading: false,
        listStyle: {
          width: '250px',
          height: '300px'
        }
      }
    },
    watch: {
      visible(newVal) {
        this.modelView = newVal
      }
    },
    methods: {
      changeVisible() {
        if (this.modelView) {
          this.init()
        } else {
          this.allData = []
          this.targetKeys = []
        }
        this.$emit('update:visible', this.modelView)
      },
      init() {
        const self = this
        let params = {}
        getAllRoles(params)
          .then(response => {
            self.allData = response.data.data
            for (let index = 0; index < self.allData.length; index++) {
              const element = self.allData[index]
              element.key = element.roleCode
              element.label = element.roleName
            }

          })
          .catch((err) => {
            self.buttonLoading = false
            self.$Message.error({
              content: err,
              duration: 10,
              closable: true
            })
          })
        let params2 = {
          userId: self.initFormData.id
        }
        getUserRoles(params2)
          .then(response => {
            let result = response.data

            for (let index = 0; index < result.data.length; index++) {
              const element = result.data[index];
              self.targetKeys.push(element.roleCode)
            }
          })
          .catch((err) => {
            self.buttonLoading = false
            self.$Message.error({
              content: err,
              duration: 10,
              closable: true
            })
          })
      },
      renderFun(item) {
        return item.label
      },
      handleChange(newTargetKeys) {
        this.targetKeys = newTargetKeys;
      },
      cancel() {
        this.modelView = false
      },
      ok() {
        const self = this
        const params = {
          userId: self.initFormData.id,
          roleCodes: self.targetKeys
        }
        self.buttonLoading = true
        setRole(params)
          .then(response => {
            self.buttonLoading = false
            self.modelView = false
            self.$Message.success({
              content: '设置角色成功'
            })
          })
          .catch((err) => {
            self.buttonLoading = false
            self.$Message.error({
              content: err,
              duration: 10,
              closable: true
            })
          })
      }
    }
  }
</script>

<style scoped>

</style>
